<template>
  <div>

    <el-row class="coll-body">
      <el-col :span="4">
        <el-image
            class="coll-img"
            style="width: 80px; height: 80px"
            :src="collection_info.img"
            :fit="'cover'">
        </el-image>
      </el-col>

      <el-col :span="12">
        <el-row><span class="coll-title">{{collection_info.title}}</span></el-row>
        <el-row>
          <span class="coll-content">
            <a href="javascript:void(0)">{{collection_info.auth}}</a>&nbsp;编&nbsp;·
            &nbsp;收录了{{collection_info.articles}}篇文章&nbsp;编&nbsp;·
            &nbsp;{{collection_info.follows}}人关注
          </span>
        </el-row>
      </el-col>

      <el-col :span="4" class="body-content-link body-content-link-post">
        <a href="javascript:void(0)" disabled>投稿</a>
      </el-col>

      <el-col :span="4" class="body-content-link body-content-link-hp">
        <a href="javascript:void(0)" disabled>主题主页</a>
      </el-col>

    </el-row>
    <el-row class="top-nav-bar">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="">
        <el-menu-item index="1"><span class="top-nav-bar-title"><i class="el-icon-document"></i>最新收录</span></el-menu-item>
        <el-menu-item index="2" disabled><span class="top-nav-bar-title"><i class="el-icon-s-comment"></i>最新评论</span></el-menu-item>
        <el-menu-item index="3" disabled><span class="top-nav-bar-title"><i class="el-icon-hot-water"></i>热门</span></el-menu-item>
      </el-menu>
    </el-row>

    <div v-for="media in media_content">
      <media-object :msg="media"></media-object>
    </div>


  </div>
</template>

<script>
  import CommonMediaObject from './CommonMediaObject'

  export default {
    name: "CommonItem",
    data() {
      return {
        activeIndex: '1',
        media_left: 18,
        media_right: 6,
        collection_info: {
          img:'https://murasakichigo.xyz/my-jianshu-simu/assets/img/subs/332293730045332541.jpg',
          title: '哲学思考',
          auth: '简书',
          articles: 114514,
          follows: 1919,
        },
        media_content:
          [
            {
              title: '这个超长假期，我获得了什么',
              desc: '原本一月放假二月回学校的我，因为疫情不得不在家里呆到了四月。 假期之前我还是一个不胖不瘦的帅气小伙。记得那时候我每天早上认真洗头，早起...',
              auth: '朱不懂',
              comments: 0,
              like: 0,
              img: '',
            },
            {
              title: '同学聚会 后记',
              desc: '昨天是班上同学送回家的 同学是班上的体育生 前段时间才辞职 问他为什么辞职 太累了还是违心 他说 是一份销售的职业 违心 独自在外打拼...',
              auth: '空狮吒',
              comments: 0,
              like: 0,
              img: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/media-object/9546763-3eab01cac5537a0a.jpg',
            },
          ],
        hidden_content_1: [
          {
            title: '当我们在聊产品方法论时，我们在聊什么',
            desc: '很多产品新人在面试过程中收到的面试反馈经常是在产品方法论方面有待提高。对于这类面试反馈往往让产品新人很困惑，大家经常提到的产品方法论到...',
            auth: '朱不懂',
            comments: 0,
            like: 0,
            img: '',
          },
          {
            title: '产品思维三十讲 | 14 系统效率：小米的效率革命',
            desc: '这一模块是讲系统能力，产品是一个系统能力的产物。 本模块第一课讲的是确定性。如果不能保证确定性，用户是没有办法依赖你的，这就不可能有忠...',
            auth: '空狮吒',
            comments: 0,
            like: 0,
            img: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/media-object/9546763-3eab01cac5537a0a.jpg',
          },
        ],
        hidden_content_2: [
          {
            title: '老罗带货直播丨竟然还有努力却达不到结果的事',
            desc: '如果说当代最赚钱的方式，那么一定是新媒体，要说新媒体里最赚钱的，那一定是带货直播。 这个愚人节发生了一件真实的事情，老罗（罗永浩）带货...',
            auth: '朱不懂',
            comments: 0,
            like: 0,
            img: '',
          },
          {
            title: '直播带货的前世、今生与未来',
            desc: '文/孟永辉 其实，直播带货并不是在今年火起来的，而是在去年的时候已经有了苗头。以薇娅、李佳琦为代表的网红主播们在去年的双十一期间已经成...',
            auth: '空狮吒',
            comments: 0,
            like: 0,
            img: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/media-object/9546763-3eab01cac5537a0a.jpg',
          },
        ],
      }
    },
    methods: {
      getLastUri() {
        let uri = this.$route.path.split("/");
        console.log('已调至路径' + uri);
        return uri[uri.length - 1];
      },

    },
    created() {
      let uri = this.getLastUri();
      console.log(uri);

    },
    components: {
      'media-object': CommonMediaObject,
    },
    watch: {
      "$route":function(to,from){
        let uri = this.getLastUri();


        switch(uri) {
          case '2':
            this.collection_info.title = '哲学思考';
            break;
          case '3':
            this.collection_info.title = '生活记事';
            this.media_content = this.hidden_content_1;
            break;
          case '4':
            this.collection_info.title = '地理故事';
            this.media_content = this.hidden_content_2;
            break;

          default:
            if (parseInt(uri) < 1 || parseInt(uri) > 11) console.log(('憋给我瞎几把乱跳'));;

        }

        //from 对象中包含当前地址
        //to 对象中包含目标地址
        //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
      },
    }
  }
</script>

<style scoped lang="less">

  .coll-body {
    margin-top: 35px;
    margin-left: 35px;
  }

  .coll-img {
    border: #969696 1px solid;
    border-radius: 15px;
  }

  .coll-title {
    font-size: 21px;
    font-weight: 700;
  }

  .coll-content {
    margin-top: 10px;
    font-size: 14px;
    color: #969696;
  }

  .top-nav-bar {
    margin-left: 35px;
  }

  .top-nav-bar-title{
    font-size: 15px;
    font-weight: 700;
    color: #646464;
    width: 300px;
  }

  .body-content-link {
    text-align:center;
    font-size: 15px;
    border: #ea6f5a 1px solid;
    border-radius: 15px;
    >a{
      color: #ea6f5a;
      text-decoration:none;
    }

  }

  .body-content-link-post {
    margin-left: 15px;
    width: 8%;
  }
  .body-content-link-hp {
    width: 12%;
    margin-left: 15px;
  }

</style>